import React, { Component } from 'react'

export default class Count extends Component {
  constructor() {
    super()
    // 类组件中如果要往Count实例上添加数据,属性名必须叫state
    this.state = {
      count: 10,
      msg: 'web0310',
    }
  }
  render() {
    //注意:render函数中的this,也一定是当前Count组件的实例
    return (
      <div>
        <p id="num">{this.state.count}</p>
        <p>{this.state.msg}</p>
        <button
          onClick={() => {
            //setState的两个作用: 1. 修改数据 2.让组件更新(页面重新渲染)
            // 注意问题:
            // 1. setState是异步执行的
            // 2. 如果多次连续调用setState会合并,合并之后又相同属性会覆盖
            // this.setState({
            //   count: this.state.count + 1,
            //   msg: 'xxxxx',
            // })
            // this.setState({
            //   count: this.state.count + 2,
            // })
            // this.setState({
            //   count: this.state.count + 3,
            // })

            // this.setState({
            //   // count: this.state.count + 1,
            //   msg: 'xxxxx',
            //   // count: this.state.count + 2,
            //   count: this.state.count + 3,
            // })

            // this.setState((newState) => {
            //   // 这个回调函数,要等到上一次state修改完毕之后,才会调用
            //   return {
            //     count: newState.count + 1,
            //   }
            // })
            // this.setState((newState) => {
            //   // 这个回调函数,要等到上一次state修改完毕之后,才会调用
            //   return {
            //     count: newState.count + 2,
            //   }
            // })
            // this.setState((newState) => {
            //   // 这个回调函数,要等到上一次state修改完毕之后,才会调用
            //   return {
            //     count: newState.count + 3,
            //   }
            // })

            this.setState(
              (newState) => {
                // 这个回调函数, 要等到上一次state修改完毕之后, 才会调用
                console.log(newState.count)
                console.log(document.getElementById('num').innerText)
                return {
                  count: newState.count + 1,
                }
              },
              () => {
                //这个回调函数,当数据和页面都变了,才调用
                console.log(this.state.count)
                console.log(document.getElementById('num').innerText)
              }
            )
          }}
        >
          +
        </button>
        <button
          onClick={() => {
            this.setState({
              msg: '123',
            })
          }}
        >
          修改msg
        </button>
      </div>
    )
  }
}
